<!--累记用户数-->
<template>
  <CommonCard title="累计用户数" value="1,087,521">
    <template #default>
      <div id="total-users-chart" style="width: 100%;height: 100%;"></div>
    </template>
    <template #footer>
      <div class="total-users-footer">
        <span>日同比</span>
        <span class="emphasize">8.66%</span>
        <div class="increase-icon"></div>
        <span class="month">月同比</span>
        <span class="emphasize">32.99%</span>
        <div class="decrease-icon"></div>
      </div>
    </template>
  </CommonCard>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  name: '',
  mixins: [commonCardMixin],
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      const chartDom = document.getElementById('total-users-chart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 20
        },
        xAxis: {
          type: 'value',
          max: 300,
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: ['总量']
        },
        tooltip: {},
        series: [{
          name: '今日平台用户数',
          type: 'bar',
          stack: '总量',
          data: [20],
          barWidth: 10,
          itemStyle: {
            color: '#45c946'
          }
        }, {
          name: '上月平台用户数',
          type: 'bar',
          stack: '总量',
          data: [300],
          barWidth: 10,
          itemStyle: {
            color: '#eee'
          }
        }, {
          type: 'custom',
          stack: '总量',
          barWidth: 10,
          data: [20],
          renderItem: (params, api) => {
            const value = api.value(0)
            const endPoint = api.coord([value, 0])
            return {
              type: 'group',
              position: endPoint,
              children: [{
                type: 'path',
                shape: {
                  d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                  x: -5,
                  y: -20,
                  width: 10,
                  height: 10,
                  layout: 'cover'
                },
                style: {
                  fill: '#45c946'
                }
              }, {
                type: 'path',
                shape: {
                  d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                  x: -5,
                  y: 10,
                  width: 10,
                  height: 10,
                  layout: 'cover'
                },
                style: {
                  fill: '#45c946'
                }
              }]
            }
          }
        }]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.total-users-footer {
  display: flex;
  align-items: center;

  .month {
    margin-left: 10px;
  }
}

</style>
